<template>
  <div class="user-center">
    <h2>个人中心</h2>

    <div v-if="isLogin" class="card">
      <img :src="userInfo.avatarUrl" alt="头像" class="avatar" />

      <p class="nickname">昵称：{{ userInfo.nickname }}</p>

      <div class="actions">
        <input
          v-model="newNickname"
          placeholder="输入新昵称"
          class="input"
        />
        <button @click="updateNickname">修改昵称</button>

        <input
          type="password"
          v-model="newPassword"
          placeholder="输入新密码"
          class="input"
        />
        <button @click="updatePassword">修改密码</button>

        <button class="home-btn" @click="goHome">返回主页</button>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import axios from 'axios'

const userStore = useUserStore()
const router = useRouter()

const isLogin = computed(() => userStore.isLogin)
const userInfo = computed(() => userStore.userInfo)

const newNickname = ref('')
const newPassword = ref('')

// 修改昵称
async function updateNickname() {
  if (!newNickname.value) return alert('请输入新昵称')

  try {
    const res = await axios.put(`/api/user/${userInfo.value.id}/nickname`, {
      nickname: newNickname.value,
    })
    // 假设后端返回最新用户数据
    userStore.setUserInfo(res.data, userStore.token)
    alert('昵称修改成功')
    newNickname.value = ''
  } catch (e) {
    console.error(e)
    alert('修改失败')
  }
}

// 修改密码
async function updatePassword() {
  if (!newPassword.value) return alert('请输入新密码')

  try {
    await axios.put(`/api/user/${userInfo.value.id}/password`, {
      password: newPassword.value,
    })
    alert('密码修改成功，请重新登录')
    logout()
  } catch (e) {
    console.error(e)
    alert('修改失败')
  }
}


// 返回主页
function goHome() {
  router.push('/')
}
</script>

<style scoped>
.user-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  background: #f8f9fa;
  min-height: 100vh;
}

.card {
  max-width: 400px;
  width: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
}

h2 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 3px solid #4caf50;
  transition: transform 0.3s;
}
.avatar:hover {
  transform: scale(1.05);
}

.nickname {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  opacity: 0.9;
}

.logout-btn {
  background-color: #e74c3c;
  color: white;
}

.home-btn {
  background-color: #3498db;
  color: white;
}

.actions button:not(.logout-btn):not(.home-btn) {
  background-color: #4caf50;
  color: white;
}
</style>
